<!DOCTYPE html>
<html>
<head>
	<title></title>
	加载js时会阻断加载等加载完后再后面内容，如果js文件出现问题则后面文件加载会出现问题，所以用到异步加载
	<script type="text/javascript" src='' defer="defer"></script> 有些js是初始化数据，不会操作页面，而有一些js包是引入工具包，工具包是一个个function,不调用不会执行，也不影响页面，这些我们希望像工具一样并行加载过来
</head>
<body>

</body>
</html>

js异步加载方案
1. defer 只有IE能用,IE9以下，也可以将代码写到里里面，等dom全部解析完才执行
2.async W3C标准，加载完就执行，async只能加载外部脚本，不能在里面写代码

asychronous  javascript and xml  --- ajax  

<script type="text/javascript">
	//预加载过程，实现异步加载js过程
	var script = document.createElement('script');//创建script标签
	script.type = 'text/javascript';
	script.src = 'tool.ts';//引入src来源,下载完；异步下载的过程；发请求，回归资源，发生过程中，下面的语句执行完了

	//script.readyState = "loaded";//会动态改变值，loaded代表加载完
	if(script.readyState){
		script.onreadystateChange = function () {//状态码改变会发生事件，监听状态码变化的时刻
			if( script.readyState == "complete" || script.readyState == "loaded"){
				test()
			}
		}
	}else{
		script.onload = function () {//确保下载完之后才执行方法，下载不完不会执行；兼容性 除IE，IE就script标签上没有onload事件
		test();
		}
	
		document.head.appendChild(script);//把标签放入head中，会执行script
	}
	

	
</script>

<script type="text/javascript">
	//封装函数，用到时候异步加载；按需加载为了执行函数
	function loadScript(url, callback) {//callback回调函数;解决把外部文件下载下来
		var script = document.createElement('script');//创建script标签
		script.type = 'text/javascript';
		
	
		//script.readyState = "loaded";//会动态改变值，loaded代表加载完
		if(script.readyState){
			script.onreadystateChange = function () {//状态码改变会发生事件，监听状态码变化的时刻
				if( script.readyState == "complete" || script.readyState == "loaded"){
					callback()
				}
			}
		}else{
			script.onload = function () {//确保下载完之后才执行方法，下载不完不会执行；兼容性 除IE，IE就script标签上没有onload事件
				callback();
			}
		
			document.head.appendChild(script);//把标签放入head中，会执行script
		}
		script.src = url;//先绑定事件再引入
	}

	loadScript('demo.js', test);//传test,test解析test未定义
	loadScript('demo.js',function(){//用函数引用f 指代callback
		test()
	});
	loadScript('demo.js','test()');
	eval('callback()')//把字符串当代码执行
</script>